{@html}

Posted on 2023-06-21 by

henrikvilhelmberglund

Let's say we wanted to display some text as HTML in our page. We could do that with an action. 

<script>
	let html = `<b>this is bold text</b><button>click me</button>`;

	function innerHTML(node, html) {
		node.innerHTML = html;

		return {
			update(html) {
				node.innerHTML = html;
			},
		};
	}
</script>

<textarea bind:value={html} cols="30" rows="10" />

<div use:innerHTML={html} />

<style>
</style>

We've seen this pattern before, we create a function that takes in a node and optionally some data, then we can apply that function on an element by adding use:innerHTML={html} in this case.

That's pretty useful but there's an even easier way to do this: the {@html} block.

this is bold text
<script>
	let html = `<b>this is bold text</b><button onClick="(function(){
    alert('You have been hacked!');
    return false;
})();return false;">Click me</button>`;
</script>

<textarea bind:value={html} cols="30" rows="10" />

<div>{@html html}</div>

<style>
</style>

Nice, we can remove the whole action and still get the desired result.

The disadvantage of this though is that we can run any code which may not be what we want. As we see here we can easily introduce security vulnerabilities .

To avoid that it is a good idea to use something like DOMPurify to clean up the HTML a bit, removing XSS problems. 

<script>
	import { browser } from "$app/environment";
	import DOMPurify from "dompurify";

	let html = `<b>this is bold text</b><button onClick="(function(){
    alert('You have been hacked!');
    return false;
  })();return false;">Click me</button>`;
</script>

<textarea bind:value={html} cols="30" rows="10" />

<!-- running DOMPurify on the server requires some extra steps so skipping that here -->
{#if browser}
	<div>{@html DOMPurify.sanitize(html)}</div>
{/if}

<style>
</style>

Let's say we want to want to take in some HTML and add an event listener to a button in there. How would we do that? Like this!

We have a problem though. When we update the text area code, the event listener stops working. We can fix that with a reactive statement (App5)
<script>
	import { onMount } from "svelte";
	import { browser } from "$app/environment";
	import DOMPurify from "dompurify";

	let div;
	let html = `<b>this is bold text</b><button>Click me</button>`;

	function handleClick() {
		console.log("you clicked me!");
	}

	onMount(() => {
		div.querySelector("button").addEventListener("click", () => handleClick());
    // cleanup!
		return () => {
			div.querySelector("button").removeEventListener("click", () => handleClick());
		};
	});
</script>

<textarea bind:value={html} cols="30" rows="10" />

{#if browser}
	<div bind:this={div}>{@html DOMPurify.sanitize(html)}</div>
{/if}

<style>
</style>